<template>
	<!-- 工具 -->
	<view class="centent">
		<view class="tool">
			<!-- 头像 -->
			<view class="tool-list">
				<view class="info">
					头像
				</view>
				<view class="configure">
					<!-- <image style="border-radius: 50%;width: 90rpx;height: 90rpx;" src="../../static/header.png"
						mode="aspectFit"></image> -->
				</view>
			</view>
			<!-- 昵称 -->
			<view class="tool-list">
				<view class="info">
					昵称
				</view>
				<view class="configure">
					<text>XING.</text>
				</view>
			</view>
			<!-- 性别 -->
			<view class="tool-list">
				<view class="info">
					性别
				</view>
				<view class="configure">
					<picker mode="selector" value="sexIndex" :range="sexList" @change="changeSex">
						<view>
							{{sexList[sexIndex]}}
						</view>
					</picker>
				</view>
			</view>
			<!-- 生日 -->
			<view class="tool-list">
				<view class="info">
					生日
				</view>
				<view class="configure">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
			<!-- 地区 -->
			<view class="tool-list">
				<view class="info">
					地区
				</view>
				<view class="configure">
					<picker mode="multiSelector" :value="multiIndex" :range="multiArray" @change="changeRegion">
						{{ multiArray[0][multiIndex[0]] }}-
						{{ multiArray[1][multiIndex[1]] }}- 
						{{ multiArray[2][multiIndex[2]] }}
					</picker>
				</view>
			</view>
			<!-- 手机号 -->
			<view class="tool-list">
				<view class="info">
					手机号
				</view>
				<view class="configure">
				<text>17638389239</text>
				</view>
			</view>
		</view>
		
		<view class="authentication">
			<view class="left">
				实名认证
			</view>
			<view class="right">
				<text>未认证</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<view class="btn">
			<u-button type="primary" text="退出登录" color="#ff3e3e" @click="outLogin"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				multiIndex: [0, 0, 0],
				multiArray: [
					['中国', '日本'],
					['北京', '上海', '广州'],
					['东城区']
				],
				sexIndex: 0,
				sexList: [
					"请选择",
					'男',
					'女'
				],
				date: currentDate
			}
		},
		created() {},
		computed: {
			// 表示日期的开始范围
			startDate() {
				return this.getDate('start');
			},
			// 表示日期的结束范围
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 退出登录
			outLogin(){
				console.log(123);
			},
			// 获取当前点击性别
			changeSex(e) {
				this.sexIndex = e.detail.value;
			},
			// 获取当前日期
			bindDateChange: function(e) {
				console.log(e.detail.value);
				this.date = e.detail.value
			},
			// 获取地区
			changeRegion(e) {
				// console.log(e.detail);
			},
			// 设置日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.centent {
		width: 100vw;
		height: 100vh;
		background-color: #f8f8f8;

		.tool {
			padding: 0rpx 40rpx;
			background-color: #fff;
			.tool-list {
				border-bottom: 1px solid #eee;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #333;
			}
		}
	
		.authentication{
			background-color: #fff;
			height: 100rpx;
			margin-top: 40rpx;
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			.right{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text{
					margin-right: 20rpx;
				}
			}
		}
		
		.btn{
			margin-top: 40rpx;
			padding: 0 20rpx;
		}
	}
</style>
